<!DOCTYPE html>
<html lang="en">
<head>
<title>About</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.4.2.js" ></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/CabinSketch_700.font.js"></script>
<script type="text/javascript" src="js/EB_Garamond_400.font.js"></script>
<!-- [if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<style type="text/css">
.bg {behavior:url(js/PIE.htc)}
</style>
<![endif]-->
<!-- [if lt IE 7]>
<div style='clear:both;text-align:center;position:relative'>
	<a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/images/upgrade.jpg" border="0" alt="" /></a>
</div>
<![endif]-->
</head>
<body id="page1">
<div class="main">
<!-- header -->
	<header>
		<div class="wrapper">
			<nav>
				<ul id="menu">
					<li id="menu_active"><a href="index.html"><span>A</span>bout</a></li>
					<li><a href="Services.html"><span>S</span>ervices</a></li>
					<li><a href="Gallery.html"><span>G</span>allery</a></li>
					<li><a href="Privacy.html"><span>P</span>rivacy</a></li>
					<li><a href="Contacts.html"><span>C</span>ontacts</a></li>
				</ul>
			</nav>
		</div>
		<h1><a href="index.html" id="logo">DesignStudio.com</a></h1>
	</header><div class="ic">More Website Templates at TemplateMonster.com!</div>
<!-- / header -->
<!-- content -->
	<section id="content">
		<div class="wrapper">
			<article class="col1">
				<h2>About Us</h2>
				<div class="pad_left1 pad_bot1">
					<div id="slider">
						<div id="for_img">
							<div id="nivo_slider">
								<img src="images/img1.jpg" alt="">
								<img src="images/img2.jpg" alt="">
								<img src="images/img3.jpg" alt="">
								<img src="images/img4.jpg" alt="">
								<img src="images/img5.jpg" alt="">
							</div>
						</div>
					</div>
					<div class="pad">
						<p><strong>Design Studio</strong> Template is one of <a href="http://blog.templatemonster.com/free-website-templates/" target="_blank">free website templates</a> created by TemplateMonster.com team. This website template is optimized for 1024X768 screen resolution. It is also XHTML &amp; CSS valid.</p>
						<p>This <a href="http://blog.templatemonster.com/2011/04/04/free-website-template-web-design-studio/" target="_blank">Free Design Studio Website Template</a> goes with two packages – with PSD source files and without them. PSD source files are available for free for the registered members of Templates.com. The basic package (without PSD source is available for anyone without registration).</p>
					</div>
				</div>
				<h2><span>Our Solutions</span></h2>
				<div class="pad_left1">
					<div class="pad_left1">
						<div class="wrapper pad_top1">
							<div class="col3">
								<div class="wrapper">
									<figure class="left marg_right1"><img src="images/page1_img3.png" alt=""></figure>
									<p class="cols"><strong class="font1">Development</strong><br>Error sit voluptatem accus antium doloremque laiantium totam rem aperiam, eaque tecto beatae.</p>
								</div>
							</div>
							<div class="col3 pad_left2">
								<div class="wrapper">
									<figure class="left marg_right1"><img src="images/page1_img5.png" alt=""></figure>
									<p class="cols"><strong class="font1">Creative Design</strong><br>Eorporis suscipit laboriosam, nisi ut aliquid ex ea commodi eum iure reprehenderit qui in ea voluptate.</p>
								</div>
							</div>
						</div>
						<div class="wrapper">
							<div class="col3">
								<div class="wrapper">
									<figure class="left marg_right1"><img src="images/page1_img4.png" alt=""></figure>
									<div class="cols"><strong class="font1">Planning</strong><br>Eius modi tempora incidunt aliquam quaerat enim ad minima veniam, quis nostrum exercitationem ullam.</div>
								</div>
							</div>
							<div class="col3 pad_left2">
								<div class="wrapper">
									<figure class="left marg_right1"><img src="images/page1_img6.png" alt=""></figure>
									<div class="cols"><strong class="font1">Effective Strategies</strong><br>Velit esse quam nihil molestiae consequatur, vel illumqui dolorem eum fugiat voluptas laiantium totam rem.</div>
								</div>
							</div>
						</div>
					</div>
				</div>
    		</article>
			<article class="col2">
				<h3>Latest Works</h3>
				<ul class="ul_works">
					<li><a href="#"><img src="images/page1_img1.png" alt=""></a></li>
					<li><a href="#"><img src="images/page1_img2.png" alt=""></a></li>
				</ul>
				<h4>Recent Tweets</h4>
				<div class="tweets">
					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem.<br><a href="#">20 days ago</a></p>
					<p>Accusantium doloremque laudatium, totam rem aperiam, eaque ipsa.<br><a href="#">36 days ago</a></p>
					<p>Nemo enim ipsam voluptatem quia voluptas.<br><a href="#">54 days ago</a></p>
				</div>
    		</article>
		</div>
	</section>
<!-- / content -->
<!-- footer -->
	<footer>
		<div class="wrapper">
			<article class="col">
				<h5>Why Us</h5>
				<ul class="list1">
					<li><a href="#">Sedut perspiciatis</a></li>
					<li><a href="#">Unde omnis iste</a></li>
					<li><a href="#">Natus error sit </a></li>
					<li><a href="#">Volupttem accus</a></li>
					<li><a href="#">Ntium doloremque </a></li>
				</ul>
			</article>
			<article class="col pad_left2">
				<h5>Links</h5>
				<ul class="list1">
					<li><a href="#">Audantium, totam</a></li>
					<li><a href="#">Remaperiam, eaque</a></li>
					<li><a href="#">Ipsa quae abillo</a></li>
					<li><a href="#">Inventore veritatis et </a></li>
					<li><a href="#">Quasi architecto </a></li>
				</ul>
			</article>
			<article class="col pad_left2">
				<h5>Follow Us</h5>
				<ul class="icons">
					<li><a href="#"><img src="images/icon1.jpg" alt="">Facebook</a></li>
					<li><a href="#"><img src="images/icon2.jpg" alt="">Stumleupon</a></li>
					<li><a href="#"><img src="images/icon3.jpg" alt="">Twitter</a></li>
					<li><a href="#"><img src="images/icon4.jpg" alt="">Digg</a></li>
					<li><a href="#"><img src="images/icon5.jpg" alt="">RSS Feed</a></li>
				</ul>
			</article>
			<article id="newsletter">
				<h5>Newsletter</h5>
				<form id="newsletter_form">
					<div class="wrapper">
						<input class="input" type="text" value="Enter your email here" onblur="if(this.value=='') this.value='Enter your email here'" onFocus="if(this.value =='Enter your email here' ) this.value=''" >
					</div>
					<a href="#" onClick="document.getElementById('newsletter_form').submit()">Subscribe</a>
				</form>
			</article>
		</div>
		<article class="privacy">
			<a rel="nofollow" href="http://www.templatemonster.com/">Website template</a> designed by TemplateMonster.com<br><a href="http://www.templates.com/product/3d-models/">3D Models</a> provided by Templates.com
		</article>
		<a href="index.html" class="footer_logo">Design<span>Studio</span>.com</a>
	</footer>
<!-- / footer -->
</div>
<script type="text/javascript">Cufon.now();</script>
<script type="text/javascript">
	$(window).load(function() {
	$('#nivo_slider').nivoSlider({
		effect:'fold', //Specify sets like: 'fold,fade,sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft'
		slices:7,
		animSpeed:500,
		pauseTime:6000,
		startSlide:0, //Set starting Slide (0 index)
		directionNav:true, //Next & Prev
		directionNavHide:false, //Only show on hover
		controlNav:true, //1,2,3...
		controlNavThumbs:false, //Use thumbnails for Control Nav
		controlNavThumbsFromRel:false, //Use image rel for thumbs
		controlNavThumbsSearch: '.jpg', //Replace this with...
		controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
		keyboardNav:true, //Use left & right arrows
		pauseOnHover:true, //Stop animation while hovering
		manualAdvance:false, //Force manual transitions
		captionOpacity:1, //Universal caption opacity
		beforeChange:function(){},
		afterChange:function(){},
		slideshowEnd:function(){} //Triggers after all slides have been shown
	});
});
</script>
</body>
</html>